<template>
  <div class="add-page">
    <h1 class="page-title">添加员工</h1>

    <el-form
        ref="addForm"
        :model="result1"
        :label-position="labelPosition"
        label-width="100px"
        class="add-form"
    >
      <el-form-item label="员工编号">
        <el-input v-model="result1.empno" placeholder="请输入员工编号"></el-input>
      </el-form-item>
      <el-form-item label="员工姓名">
        <el-input v-model="result1.ename" placeholder="请输入员工姓名"></el-input>
      </el-form-item>
      <el-form-item label="职位">
        <el-input v-model="result1.job" placeholder="请输入职位"></el-input>
      </el-form-item>
      <el-form-item label="经理编号">
        <el-input v-model="result1.mgr" placeholder="请输入经理编号"></el-input>
      </el-form-item>
      <el-form-item label="入职日期">
        <el-date-picker
            v-model="result1.hiredate"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="工资">
        <el-input v-model="result1.sal" placeholder="请输入工资"></el-input>
      </el-form-item>
      <el-form-item label="佣金">
        <el-input v-model="result1.comm" placeholder="请输入佣金"></el-input>
      </el-form-item>
      <el-form-item label="部门编号">
        <el-input v-model="result1.deptno" placeholder="请输入部门编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addmethod" class="add-button">添加</el-button>
        <el-button @click="$router.push('/home')" class="cancel-button">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
// import { ElMessage } from 'element-plus' // 如果使用的是Element Plus
import { ElMessage } from 'element-ui';

export default {
  name: "Add",
  data() {
    return {
      result1: {
        empno: "",
        ename: "",
        job: "",
        mgr: "",
        hiredate: "",
        sal: "",
        comm: "",
        deptno: "",
      },
      labelPosition: 'right',// 默认放置在右边，可以根据需求修改或者绑定动态值
      // formLabelAlign: {  // 这个属性在当前组件中未被使用，所以移除
      //   name: '',
      //   region: '',
      //   type: ''
      // }
    };
  },
  methods: {
    addmethod() {
      // 注意：前端现在是 POST 请求 /add，并且数据在请求体中。  如果后端仍然是 GET，需要修改！
      axios.post('http://localhost:10000/add', this.result1)// 修改为 POST
          .then(res => {
            console.log(res);
            if (res.data.code === 2000) { // 假设成功码是2000
              ElMessage({        // 使用ElMessage替代alert
                message: '添加成功',
                type: 'success', // 成功提示
                duration: 2000 // 2秒后自动关闭
              });
              //  this.$router.push('/home'); //  添加成功后重定向回列表页面
            }else {
              ElMessage({     //  使用弹窗提示失败信息
                message: '添加失败：' + res.data.msg,
                type: 'error', // 失败提示
                duration: 2000
              });
            }
            this.$refs.addForm.resetFields(); // 清空表单
          })
          .catch(err => {
            console.error("请求失败:", err);
            ElMessage({
              message: '请求发送失败，请检查网络或服务器状态',
              type: 'error',
              duration: 2000
            });
          });
    },
  },
};
</script>

<style scoped>
/* 页面整体样式 */
.add-page {
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中 */
  padding: 20px;
}

.page-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

/* 表单样式 */
.add-form {
  width: 600px; /* 限制表单宽度 */
  /* border: 1px solid #ccc; */
  padding: 20px;
  border-radius: 5px;
  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
}
.add-form .el-form-item {
  margin-bottom: 18px;
}
/* 输入框样式 */
.add-form .el-input {
  width: 100%; /* 让输入框充满父元素 */
}

/* 按钮样式 */
.add-button {
  margin-right: 10px;
}

.cancel-button {
  background-color: #fff;
  color: #409EFF;
  border-color: #dcdfe6;
}
.cancel-button:hover {
  color: #fff;
  background-color: #409EFF;
  border-color: #409EFF;
}
</style>
